<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="../../plugins/layui/css/layui.css">
    <link rel="stylesheet" href="../../plugins/bootstrap/css/bootstrap.css">
    <link rel="stylesheet" href="../../css/head.css">
</head>

<body>

    <div class="container-fluid">
        <div class="row" style="background-color:rgb(1,81,40)">
            <ul class="nav navbar-nav navbar-right" style="padding-right: 20px;font-size: 10px;" id="head">
                <li><a href="#">欢迎&nbspxxx!</a></li>
                <li><a href="../login.html">安全退出</a></li>
                <li><a href="../personal/myinfo.html">个人中心</a></li>
            </ul>
        </div>
    </div>

    <div style="padding-left: 550px" id="face">
        <img src="../../imgs/boy.PNG" style="width:400px;height:620px; border:0px" usemap="#Map" id="manImg" />
        <!--向右宽向左宽 上边距-->
        <map name="Map">
            <!--左手臂-->
            <area shape="rect" coords="370,320,330,130" style="background-color: black"
                href="../../html/showmessage/message.html?uri=7" />
            <!--左手-->
            <area shape="rect" coords="360,370,330,330" style="background-color: black"
                href="../../html/showmessage/message.html?uri=7" />
            <!--右手-->
            <area shape="rect" coords="75,90,20,150" style="background-color: black"
                href="../../html/showmessage/message.html?uri=7" />
            <!--右臂-->
            <area shape="rect" coords="230,110,80,150" style="background-color: black"
                href="../../html/showmessage/message.html?uri=7" />
            <!--头-->
            <area shape="rect" coords="310,40,270,65" style="background-color: black"
                href="../../html/showmessage/message.html?uri=2" />
            <!--眼-->
            <area shape="rect" coords="310,100,270,70" style="background-color: black"
                href="../../html/showmessage/message.html?uri=1" />
            <!--胸-->
            <area shape="rect" coords="330,180,240,120" style="background-color: black"
                href="../../html/showmessage/message.html?uri=3" />
            <!--腹-->
            <area shape="rect" coords="320,275,230,200" style="background-color: black"
                href="../../html/showmessage/message.html?uri=4" />
            <!--咳咳-->
            <area shape="rect" coords="280,320,250,280" style="background-color: black"
                href="../../html/showmessage/message.html?uri=5" />
            <!--腿-->
            <area shape="rect" coords="320,540,150,320" style="background-color: black"
                href="../../html/showmessage/message.html?uri=7" />
            <!--脚-->
            <area shape="rect" coords="320,600,80,550" style="background-color: black"
                href="../../html/showmessage/message.html?uri=7" />
        </map>


        <img src="../../imgs/girl.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
            id="womanImg" />
        <img src="../../imgs/young.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
            id="youngImg" />
    </div>

    <div style="padding-left: 550px;display: none" id="back">
        <img src="../../imgs/boyside.PNG" style="width:400px;height:620px; border:0px" usemap="#Map" id="manImg" />
        <img src="../../imgs/girlside.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
            id="womanImg" />
        <img src="../../imgs/youngside.PNG" style="width:400px;height:620px; border:0px;display: none" usemap="#Map"
            id="youngImg" />
    </div>

    <div>
        <div style="width: 100%; margin-left: 450px;">
            <button class="layui-btn" style="width: 150px" onclick="man()">男性</button>
            <button class="layui-btn" style="width: 150px" onclick="woman()">女性</button>
            <button class="layui-btn" style="width: 150px" onclick="young()">儿童</button>
            <button class="layui-btn" style="width: 150px" onclick="check()">背部疾病请点击</button>
        </div>
    </div>
    <script src="../../plugins/layui/layui.all.js"></script>

    <script>

        function man() {
            document.getElementById("face").style.display = "block";
            document.getElementById("back").style.display = "none";
            document.getElementById("manImg").style.display = "block";
            document.getElementById("womanImg").style.display = "none";
            document.getElementById("youngImg").style.display = "none";
        }

        function woman() {
            document.getElementById("face").style.display = "block";
            document.getElementById("back").style.display = "none";
            document.getElementById("manImg").style.display = "none";
            document.getElementById("womanImg").style.display = "block";
            document.getElementById("youngImg").style.display = "none";
        }

        function young() {
            document.getElementById("face").style.display = "block";
            document.getElementById("back").style.display = "none";
            document.getElementById("youngImg").style.display = "block";
            document.getElementById("womanImg").style.display = "none";
            document.getElementById("manImg").style.display = "none";
        }

        function check() {

            document.getElementById("face").style.display = "none";
            document.getElementById("back").style.display = "block";
        }
    </script>
</body>

</html>